<template>
    <div v-if="$route.meta.useFrame != undefined &&   $route.meta.useFrame == false">
        <router-view></router-view>
    </div>
    <div v-if="$route.meta.useFrame == undefined ||   $route.meta.useFrame == true">
        <el-container>
            <el-header>

                <el-row justify="space-between" class="header">
                    <el-col :span="6" class="logo">
                        <img src="https://element-plus.gitee.io/images/element-plus-logo.svg"/></el-col>
                    <el-col :span="6"></el-col>
                    <el-col :span="6" class="userInfo">
                        <el-icon>
                            <User/>
                        </el-icon>
                        <el-dropdown @command="ddClick">
        <span class="el-dropdown-link">
           {{ userInfo.tel }} <el-icon class="el-icon--right"><arrow-down/></el-icon>
        </span>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item>Action 1</el-dropdown-item>
                                    <el-dropdown-item>Action 2</el-dropdown-item>
                                    <el-dropdown-item>Action 3</el-dropdown-item>
                                    <el-dropdown-item divided command="logout">注销</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </el-col>
                </el-row>


            </el-header>
            <el-container>
                <el-aside width="auto">
                    <MenuVue></MenuVue>
                </el-aside>
                <el-main>
                    <BreadVue class="bread"></BreadVue>
                    <TabVue></TabVue>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>

    </div>

</template>
<script setup lang="ts">
import MenuVue from '@/components/Menu.vue'
import BreadVue from '@/components/Bread.vue'
import TabVue from '@/components/Tab.vue'


import {onMounted} from 'vue'
import {ElMessageBox} from 'element-plus'
import store1 from '@/store/appStore.ts';
import {storeToRefs} from 'pinia'

const {token, userInfo,menuList} = storeToRefs(store1())
import {useRoute, useRouter} from 'vue-router'

const route = useRoute()   // 不带r ， 获取当前页面信息的时候，url 或 参数query
const router = useRouter() // 带r， 负责页面跳转，向前或向后

onMounted(() => {


})

const ddClick = (command: any) => {


    ElMessageBox.confirm(
        '你确定要注销吗?',
        'Warning',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            if (command == "logout") {
                token.value = ""
                userInfo.value.id = 0
                userInfo.value.tel = '游客'
                menuList.value=[]
                router.push({name: "user-login"})
            }
        })
        .catch(() => {
        })
}


</script>
<style scoped>
.el-header {
    padding-left: 0px;
    padding-right: 0px;
}

.header {
    background-color: #708090;
    padding-left: 0px;
    padding-right: 0px;
    height: 60px;

}

.logo img {
    height: 30px;
    margin-top: 10px;
    margin-left: 8px;
}

.userInfo {

    text-align: right;
    line-height: 52px;
    padding-right: 10px;
    color: white;
}

.el-dropdown {
    padding-left: 4px;
    line-height: 50px;
    color: white;

}

.el-dropdown-link {
    outline: none;
}

.el-main{
    background-color: #f9f6f6cc;
}


</style>
<style>
.bread{
    margin-bottom: 10px;
}
.el-divider__text {
    background-color: #f9f6f6cc !important;
}
</style>
